<template>
  <div>
    <div class="flex justify-between items-center">
      <span class="text-lg font-semibold">你的反馈会帮助我们改进</span>
      <el-icon class="cursor-pointer" @click="emits('close')">
        <CloseQuote />
      </el-icon>
    </div>
    <div class="flex justify-start items-center gap-2 mt-5 flex-wrap">
      <span
        v-for="feedType in types"
        :key="feedType"
        @click="selectType = feedType"
        class="px-2 py-1 cursor-pointer border bg-background-01 black:bg-background-01-dark rounded text-text-01 black:text-text-01-dark text-sm border-border-02 black:border-border-02-dark hover:text-text-04 black:hover:text-text-04-dark hover:bg-aif10enterbg hover:border-border-04 black:hover:border-border-04-dark"
        :class="{
          '!text-text-04 black:!text-text-04-dark !border-border-04 black:!border-border-04-dark !bg-aif10enterbg':
            selectType === feedType
        }"
        >{{ feedType }}</span
      >
    </div>
    <textarea
      class="w-full h-24 focus:outline-none focus:border-border-04 black:focus:border-border-04-dark resize-none text-sm border-base border rounded-lg mt-4 !caret-text-04 !black:caret-text-04-dark !p-2 bg-background-01 black:bg-background-01-dark"
      v-model="feedbackContent"
    ></textarea>
    <div
      class="text-sm font-semibold mt-2 h-10 text-white flex justify-center items-center rounded-lg bg-background-05 black:bg-background-05-dark cursor-pointer"
      @click="submit"
      :class="{ 'bg-background-11 black:bg-background-11-dark !cursor-not-allowed': disabled }"
      v-track:click="{
        id: 'thspc_f10_copilot_chatpanel_unlike',
        logmap: () => ({ content: feedbackContent })
      }"
    >
      提交
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import type { ChatMessages } from '@/common/models/chat-message'
import { CloseQuote } from '@/components/icons'
import { feedback } from '../../services/chat-api'
import { ElMessage } from 'element-plus'
import { ERRORTYPE } from '@/common/config/const'

const types = ref<string[]>([
  '图表类别错误',
  '答非所问',
  '股票识别错误',
  '生图失败',
  '指标错误',
  '敏感/价值观问题'
])

const feedbackContent = ref('')

const selectType = ref('')

const props = defineProps<{
  message: ChatMessages | null
}>()

const disabled = computed(() => !selectType.value && !feedbackContent.value)

const emits = defineEmits(['close'])

const submit = async () => {
  console.log(selectType.value, feedbackContent.value, props.message?.id)
  if (disabled.value) return
  try {
    await feedback({
      ask_id: props.message!.id,
      like: 0,
      feedback: { type: selectType.value, content: feedbackContent.value }
    })
    props.message!.like = 0
    selectType.value = ''
    feedbackContent.value = ''
    ElMessage.success('提交成功!')
  } catch (error) {
    window.f10log(ERRORTYPE.AJAX, `反馈提交失败：${error}`, error)
    ElMessage.error('提交失败!')
  } finally {
    emits('close')
  }
}
</script>
